<template>
  <div class="app-container">
    <el-card class="box-card" v-if="oprate==='详情'">
      <h1 class="title">{{contentInfo.name}}</h1>
      <div class="content" v-html="contentInfo.details"></div>
    </el-card>

    <el-card class="box-card" v-else>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="details">
          <tinymce v-model="form.details" :height="300" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { richtextInfo, addRichtext, editRichtext } from "@/api/system";

export default {
  name: "RichtextInfo",
  components: { Tinymce },
  data() {
    return {
      contentInfo: "",
      oprate: "",
      form: {
        name: "",
        details: ""
      },
      rules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        details: [{ required: true, message: "请输入内容", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.oprate = this.$route.params.oprate;
    if (this.oprate === "详情" || this.oprate === "编辑") {
      this.getInfo();
    }
  },
  methods: {
    async getInfo() {
      const res = await richtextInfo({ id: this.$route.params.id });
      console.log(res);
      this.contentInfo = res.data;
      if (this.oprate === "编辑") {
        this.form.name = res.data.name;
        this.form.details = res.data.details;
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.oprate === "添加") {
            const res = await addRichtext({ ...this.form });
            if (res.st === 1) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch("tagsView/delView", this.$route);
              //返回上一个tab页面 返回上一步路由，
              this.$router.go(-1);
            } else {
              console.log(res);
              this.$message.error("添加失败");
            }
          } else if (this.oprate === "编辑") {
            this.form.id = this.$route.params.id;
            const res = await editRichtext({ ...this.form });
            if (res.st === 1) {
              this.$message({
                message: "编辑成功",
                type: "success"
              });
              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch("tagsView/delView", this.$route);
              //返回上一个tab页面 返回上一步路由，
              this.$router.go(-1);
            } else {
              console.log(res);
              this.$message.error("编辑失败");
            }
          }
        }
      });
    },
    cancel() {
      // 调用全局挂载的方法,关闭当前标签页
      this.$store.dispatch("tagsView/delView", this.$route);
      //返回上一个tab页面 返回上一步路由，
      this.$router.go(-1);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
}
</style>